<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<<<<<<< HEAD
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>example3</title>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' ></script>
        <style>
			
			.svg{
				border:1px solid rgb(0,0,0);
			}
			.svg path.axis{
				stroke:rgb(0,0,0);
				fill:none;
			}
			.svg .line{
				fill:none;
				stroke:rgb(0,0,0);
			}
			.yAxis .domain{
				stroke:rgb(0,0,0);
				stroke-width:1px;
				fill:none;
			}
			.yAxis .tick{
				stroke : rgb(0,0,0) ;
			}
        </style>
	</head>
	<body>
    	<script type='text/javascript' >
        	(function(w){
				
				var width = 500 ;
				var height = 100 ;
				var margin = 50 ;
				var svg = d3.select('body').append('svg')
					.attr({
						"width" : width + 2*margin ,
						"height" : height + 2*margin ,
						'class' : 'svg'
					}) ;
				var y = d3.scale.linear()
					.domain([100,0])
					.range([margin,margin+height]) ;
				var x = d3.scale.linear()
					.domain([0,11])
					.range([margin,(margin+width)*2]) ;
				
				var yAxis = d3.svg.axis().scale(y).orient('left').ticks(3);
				
				svg.append('clipPath').attr({id : 'clip'})
					.append('rect').attr({
						'width' : width + margin ,
						'height' : height ,
						'transform' : 'translate('+x(0)+','+y(100)+')' 
					}) ;
				var xpath = svg.append('g').attr({
						'class' : 'yAxis' ,
						'transform' : 'translate(' + margin + ',0)'
					}).call(yAxis) ; 
				
				var line = d3.svg.line()
					.x(function(d,i){ return x(i) ; })
					.y(function(d){ return y(d) ; });
				
				var rCount = function(){
					return Math.random()*100 ;
				} ;
				
				var points = [10,80,20,60,10,90,60,70,90,50,64,25.52] ;
				var interTime = 1000 ;
				var linepath = svg.append('g')
					.attr({
						'clip-path' : 'url(#clip)'	
					}).append('path')
						.attr({
							'class' : 'line' ,
							'd' : line(points)
						}) ;
					linepath.attr({
						d : line(points) 
					}) ;
				
				window.setInterval(function(){
					linepath.transition().each('end',function(){
						points.shift() ;
						d3.select(this).attr({
							d:line(points) ,
							transform : 'translate(0,0)'
						}) ;
						points.push(rCount()) ;
					}).attr({
						transform : 'translate(-' + x(0)*2 + ',0)'
					}) ;
				},interTime) ;	
					
					
				
			}(window)) ;
=======
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>example5</title>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' ></script>
        <style>
            .svg{
                display:inline-block;
                margin: 20px 20px 0 0;
                box-shadow:0 0 5px rgba(0,0,0,.2)
            }
            .svg path{
               stroke:#000;
                fill:none;
            }
            .svg circle{
                fill:#000;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" >
            (function(w){

                var createChart = function( fn ){
                    var width = 800 ;
                    var height = 500 ;
                    var margin = 50;
                    var xMax = 10 ;
                    var yMax = 100 ;
                    var svg = d3.select('body').append('svg').attr({ 'width' : width , 'height' : height , class : 'svg' }) ;
                    var x = d3.scale.linear().range([margin,width-margin]).domain([0,xMax]) ;
                    var y = fn.range([height-margin,margin]).domain([0,yMax]) ;
                    var list = d3.range(xMax+1).map(function(d,i){
                        return [ x(i) , y(i*yMax/xMax)  ] ;
                    });
                    var line = d3.svg.line()
                            .x(function(d){ return d[0]; })
                            .y(function(d){ return d[1]; });
                    svg.append('path').attr({
                        'd' : line(list)
                    })
                    svg.selectAll('circle').data(list).enter().append('circle').attr({
                        'cx' : function(d){ return d[0] ;  } ,
                        'cy' : function(d){ return d[1]; } ,
                        'r' : 5
                    }) ;
                    svg.selectAll('text').data(list).enter().append('text').attr({
                        'x' : function(d){ return d[0]; } ,
                        'y' : function(d){ return d[1] - 10 ; }
                    }).text(function(d){
                        return y.invert(d[1]).toFixed(2);
                    });
                } ;

                createChart(d3.scale.linear()) ;
                createChart(d3.scale.pow().exponent(5.5));
            }(window)) ;
>>>>>>> c14c8c6e1af8e7dc424e85a78a0dfea98c7e5121
        </script>
    </body>
</html>